{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}个人主页{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 bg-white p-4">
        <div class="media">
            <img src="{{ user.profile.avatar.url }}" alt="个人头像" class="rounded mr-4" width="200" height="200">
            <div class="media-body">
                <h2 class="mt-0">{{ user.username }}</h2>
                <p class="text-secondary">{{ user.email }}</p>
                <p>
                    <button class="btn btn-outline-info btn-sm" type="button" data-toggle="collapse"
                            data-target="#profileInfo" aria-expanded="false" aria-controls="collapseExample">
                        编辑
                    </button>
                </p>
            </div>
        </div>
        {#如果用户输入有误则一直显示表单，通过添加'show' class属性来实现#}

        <div class="collapse {% if user_form.errors or profile_form.errors %}show{% endif %}" id="profileInfo">
            <hr>
            <form method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="form-group">
                    {{ user_form | crispy }}
                    {{ profile_form | crispy }}
                </div>
                <div class="form-group">
                    <button class="btn btn-outline-info" type="submit">保存</button>
                </div>
            </form>
        </div>
        </div>
        <div class="col-md-4">
            {% include 'blog/_sidebar.html' %}
        </div>
    </div>
</div>
{% endblock %}


